<template>
  <div ref="chartWrapper" class="chart-wrapper">
    <div ref="chartContainer" class="chart-container">
      <div ref="mainChart" id="main"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'Sanshen',
  setup() {
    const chartWrapper = ref(null);
    const chartContainer = ref(null);
    const mainChart = ref(null);
    
    let myChart = null;
    let resizeObserver = null;

    const initChart = () => {
      if (mainChart.value) {
        // 强制设置容器尺寸
        mainChart.value.style.width = '250px';
        mainChart.value.style.height = '290px';
        mainChart.value.style.minWidth = '250px';
        mainChart.value.style.minHeight = '290px';
        
        // 销毁已存在的图表实例
        if (myChart) {
          myChart.dispose();
        }
        
        myChart = echarts.init(mainChart.value);
        
        const option = {
          backgroundColor: '#0f2035',
          series: {
            type: 'sankey',
            layout: 'none',
            emphasis: {
              focus: 'adjacency'
            },
            nodeWidth: 8,
            nodeGap: 8,
            draggable: false,
            levels: [
              {
                depth: 0,
                itemStyle: {
                  color: '#38bdf8'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 1,
                itemStyle: {
                  color: '#00b96b'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 2,
                itemStyle: {
                  color: '#ffcc00'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              }
            ],
            data: [
              {
                name: 'a'
              },
              {
                name: 'b'
              },
              {
                name: 'a1'
              },
              {
                name: 'a2'
              },
              {
                name: 'b1'
              },
              {
                name: 'c'
              }
            ],
            links: [
              {
                source: 'a',
                target: 'a1',
                value: 5
              },
              {
                source: 'a',
                target: 'a2',
                value: 3
              },
              {
                source: 'b',
                target: 'b1',
                value: 8
              },
              {
                source: 'a',
                target: 'b1',
                value: 3
              },
              {
                source: 'b1',
                target: 'a1',
                value: 1
              },
              {
                source: 'b1',
                target: 'c',
                value: 2
              }
            ],
            label: {
              color: '#fff',
              fontSize: 10
            },
            lineStyle: {
              color: 'source',
              opacity: 0.4
            }
          }
        };

        myChart.setOption(option);
        
        // 确保图表正确渲染
        setTimeout(() => {
          if (myChart) {
            myChart.resize({
              width: 250,
              height: 290
            });
          }
        }, 50);
      }
    };

    const handleResize = () => {
      if (myChart) {
        setTimeout(() => {
          myChart.resize({
            width: 250,
            height: 290
          });
        }, 50);
      }
    };

    onMounted(() => {
      // 确保DOM完全渲染后再初始化
      setTimeout(() => {
        initChart();
      }, 100);
      
      // 监听窗口大小变化
      window.addEventListener('resize', handleResize);
      
      // 使用 ResizeObserver 监听容器变化
      if (window.ResizeObserver && chartContainer.value) {
        resizeObserver = new ResizeObserver(() => {
          handleResize();
        });
        resizeObserver.observe(chartContainer.value);
      }
    });

    onUnmounted(() => {
      if (myChart) {
        myChart.dispose();
      }
      if (resizeObserver) {
        resizeObserver.disconnect();
      }
      window.removeEventListener('resize', handleResize);
    });

    // 提供重新初始化的方法
    const reinitChart = () => {
      setTimeout(() => {
        initChart();
      }, 100);
    };

    return {
      chartWrapper,
      chartContainer,
      mainChart,
      reinitChart
    };
  }
};
</script>

<style scoped>
.chart-wrapper {
  width: 250px;
  height: 290px;
  min-width: 250px;
  min-height: 290px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.chart-container {
  width: 250px;
  height: 290px;
  min-width: 250px;
  min-height: 290px;
  position: relative;
  flex-shrink: 0;
}

#main {
  width: 250px;
  height: 290px;
  min-width: 250px;
  min-height: 290px;
}
</style>